<template>
  <div id='tmpl'>
      <div class="row" v-for="(item,index) in datalist">
        <mt-switch class="switch" v-model="value[index]"></mt-switch>
        <img :src="item.thumb_path" class="img" alt="商品图片">
        <div class="inforight">
            <h4 v-text="item.title"></h4>
            <div class="bottom">
                <ul>
                    <li>￥{{item.sell_price}}</li>
                    <li><carinputnumber :initCount="item.cou" :goodsid="item.id" v-on:cardataobj="getInputNumber"></carinputnumber></li>
                    <li><a href="javascript:void(0)" @click="delrow(item.id,index)">删除</a></li>
                </ul>
            </div>
        </div>
      </div>

      <div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品{{totalcount}}件,总价:￥{{totalAmount}}元</li>
				</ul>
			</div>
			<div id="button">
				<mt-button  type="danger" size="small">去结算</mt-button>
			</div>
		</div>

  </div>
</template>
<script>
import {Toast} from 'mint-ui';
import carinputnumber from '../subcom/carinputNumber.vue';
import {getgoodsObject,updateData,removeItem} from '../../kits/localSg.js'

export default {
    components:{
        carinputnumber
    },
  data () {
    return {
        datalist:[],
        value:[],
        totalAmount:0
    };
  },
  computed:{
      totalcount(){
          var trueArr = this.value.filter(function(item){return item;})

          var amount = 0;
          this.value.forEach((item,index) => {
              if(item){
                  var count = this.datalist[index].cou;
                  var price = this.datalist[index].sell_price;
                  var itemamount = count * price;
                  amount += itemamount;
              }
          });
          this.totalAmount = amount;
          return trueArr.length;
      }
  },
  created(){
      this.getdatalist();
  },
  methods:{
      delrow(goodsid,index){
        this.value.splice(index,1);

        this.datalist.splice(index,1);
        
        removeItem(goodsid);
      },
      getInputNumber(resObj){
          updateData(resObj);


          for(var i = 0;i <this.datalist.length ; i++){
              if(this.datalist[i].id == resObj.goodsid){
                  if(resObj.type == 'add'){
                      this.datalist[i].cou = + this.datalist[i].cou + i ;
                  }else {
                      this.datalist[i].cou = + this.datalist[i].cou - i ;                      
                  }
                  break;
              }
          }

      },
      getdatalist(){
          var obj = getgoodsObject();

          var idstring = '';
          for (var key in obj){
              idstring+= key + ',';
          }
          idstring = idstring.substring(0,idstring.length-1);
          if(!idstring){
			return;
		  }
	      var url  = this.$common.apidomain + '/api/goods/getshopcarlist/'+idstring;
          this.$http.get(url).then(function(res){
              if(res.body.status != 0 ){
					Toast(res.body.message);
					return;
				}

                res.body.message.forEach((item)=>{
                    item.cou = obj[item.id];

                    this.value.push(false);
                });

                this.datalist = res.body.message;
          });

      }
  }
}
</script>
<style lang="css" scoped>
    .row{
        border-bottom: 1px solid rgba(0,0,0,.3);
        height: 102px;
        display: flex;
    }
    .switch{
        flex: 0 0 52px;
    }

   .img{
       margin-left: 5px;
       height: 75px;
       width: 75px;
       flex: 0 0 85px;
   }
    .inforight{
		/*margin-left: 5px;*/
		flex:1;
	}
   .inforight ul {
       padding-left: 0;
   }
   .inforight li {
       list-style: none;
       display: inline-block;
   }
   .inforight h4{
       color: #0094ff;
       font-size: 14px;
   }
   .bottom li:first-child{
       color:red;
       margin-right: 5px;
   }
   .bottom li:last-child{
		margin-left: 5px;
	}
   #total{
		height: 100px;
		background-color: rgba(0,0,0,0.1);
		display: flex;
		padding: 5px;;
	}

	#total ul {
	 padding-left: 0px;
	}
	#total li{
		list-style: none;
		font-size: 14px;
	}

	#button{
		flex:0 0 60px;
		margin: 30px 0 0 0 ;
	}

	.desc{

		flex:1;
	}
</style>